<template>
	<div class="page">
		<div class="page__bd">
			<div class="weui-tab">
				<div class="weui-tab__panel">
					<div class="weui-tab__panel_top">
						<div class="weui-tab__panel_top_left">
							<p>Skyeye</p>
						</div>
						<div class="weui-tab__panel_top_right">
							<el-dropdown :hide-on-click="false">
								<span class="sel icon iconfont icon-add6"></span>
								<el-dropdown-menu slot="dropdown" class="down_1">
									<el-dropdown-item><img src="../../assets/img/sao.png" class="down_1_1" />扫一扫</el-dropdown-item>
									<el-dropdown-item><img src="../../assets/img/screens.png" class="down_1_1" />投屏</el-dropdown-item>
									<el-dropdown-item><img src="../../assets/img/chat.png" class="down_1_1" />发起群聊</el-dropdown-item>
									<el-dropdown-item><img src="../../assets/img/add.png" class="down_1_1" />添加好友</el-dropdown-item>
									<el-dropdown-item><img src="../../assets/img/postcard.png" class="down_1_1" />交换名片</el-dropdown-item>
									<el-dropdown-item><img src="../../assets/img/wait.png" class="down_1_1" />待阅待办</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
					</div>
					<div class="weui-tab__panel_search">
						<input class="weui-tab__panel_search_inp" type="text" placeholder="搜索" />
						<i class="weui-icon-search"></i>
					</div>
					<div class="weui-tab__panel_bd">
						<v-refresh :on-refresh="onRefresh">
							<div class="weui-panel__bd">
								<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
									<div class="weui-media-box__hd">
										<img class="weui-media-box__thumb" alt="" src="">
									</div>
									<div class="refreshText_center">
										<p>
											<router-link to="RemainDone" class="router_1">待办待阅</router-link>
										</p>
										<p class="weui-media-box__desc">
											<span class="span_1">待处理:</span>
											<span class="span_1">审批</span>
											<span class="span_1">(</span>
											<span class="span_2">1</span>
											<span class="span_1">)</span>
											<span class="span_1">日程</span>
											<span class="span_1">(</span>
											<span class="span_2">1</span>
											<span class="span_1">)</span>
											<span class="span_1">任务</span>
											<span class="span_1">(</span>
											<span class="span_2">1</span>
											<span class="span_1">)</span>
										</p>
									</div>
									<!--<div class="refreshText_right">-->
									<!--<span class="weui-badge_1">2</span>-->
									<!--</div>-->
								</a>
							</div>

							<div class="weui-panel__bd">
								<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
									<div class="weui-media-box__hd">
										<img class="weui-media-box__thumb" alt="" src="">
									</div>
									<div class="refreshText_center">
										<p>
											<router-link to="Emails" class="router_1">我的邮件</router-link>
										</p>
										<p class="weui-media-box__desc">
											小明本周工作周报
										</p>
									</div>
									<div class="refreshText_right">
										<span class="weui-badge_1">2</span>
									</div>
								</a>
							</div>

							<div class="weui-panel__bd">
								<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
									<div class="weui-media-box__hd">
										<img class="weui-media-box__thumb" alt="" src="">
									</div>
									<div class="refreshText_center">
										<p>
											<router-link to="Personnel" class="router_1">人事部</router-link>
										</p>
										<p class="weui-media-box__desc">
											今晚一起聚个餐
										</p>
									</div>
									<div class="refreshText_right">
										<span class="weui-badge_1">2</span>
									</div>
								</a>
							</div>

							<div class="weui-panel__bd">
								<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
									<div class="weui-media-box__hd">
										<img class="weui-media-box__thumb" alt="" src="">
									</div>
									<div class="refreshText_center">
										<p>
											<router-link to="Talk" class="router_1">OA讨论组</router-link>
										</p>
										<p class="weui-media-box__desc">
											这个功能还需要调整一下
										</p>
									</div>
									<div class="refreshText_right">
										<span class="weui-badge_1">2</span>
									</div>
								</a>
							</div>

							<div class="weui-panel__bd">
								<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
									<div class="weui-media-box__hd">
										<img class="weui-media-box__thumb" alt="" src="">
									</div>
									<div class="refreshText_center">
										<p>
											<router-link to="People" class="router_1">小明</router-link>
										</p>
										<p class="weui-media-box__desc">
											明天请个假
										</p>
									</div>
									<div class="refreshText_right">
										<span class="weui-badge_1">2</span>
									</div>
								</a>
							</div>

							<div class="weui-panel__bd">
								<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
									<div class="weui-media-box__hd">
										<img class="weui-media-box__thumb" alt="" src="">
									</div>
									<div class="refreshText_center">
										<p>
											<router-link to="People" class="router_1">小明</router-link>
										</p>
										<p class="weui-media-box__desc">
											明天请个假
										</p>
									</div>
									<div class="refreshText_right">
										<span class="weui-badge_1">2</span>
									</div>
								</a>
							</div>
							<div class="weui-panel__bd">
								<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
									<div class="weui-media-box__hd">
										<img class="weui-media-box__thumb" alt="" src="">
									</div>
									<div class="refreshText_center">
										<p>
											<router-link to="People" class="router_1">小明</router-link>
										</p>
										<p class="weui-media-box__desc">
											明天请个假
										</p>
									</div>
									<div class="refreshText_right">
										<span class="weui-badge_1">2</span>
									</div>
								</a>
							</div>
							<div class="weui-panel__bd">
								<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
									<div class="weui-media-box__hd">
										<img class="weui-media-box__thumb" alt="" src="">
									</div>
									<div class="refreshText_center">
										<p>
											<router-link to="People" class="router_1">小明</router-link>
										</p>
										<p class="weui-media-box__desc">
											明天请个假
										</p>
									</div>
									<div class="refreshText_right">
										<span class="weui-badge_1">2</span>
									</div>
								</a>
							</div>
							<div class="weui-panel__bd">
								<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
									<div class="weui-media-box__hd">
										<img class="weui-media-box__thumb" alt="" src="">
									</div>
									<div class="refreshText_center">
										<p>
											<router-link to="People" class="router_1">小明</router-link>
										</p>
										<p class="weui-media-box__desc">
											明天请个假
										</p>
									</div>
									<div class="refreshText_right">
										<span class="weui-badge_1">2</span>
									</div>
								</a>
							</div>
						</v-refresh>
					</div>
				</div>
			</div>
		</div>
	</div>

</template>

<script>
	import DropDownRefresh from '@/components/publics/DropDownRefresh'
	export default {
		name: 'mainIndex',
		data() {
			return {

			}
		},
		mounted() {
			this.getStartPullUpState()
			this.getPullUpDefData()
		},
		methods: {

			onRefresh(done) {
				this.getStartPullUpState(),
					this.getPullUpDefData()
				done()
			},
			// 获取上拉加载的初始数据
			getPullUpDefData() {
				//				this.infiniteLoadData.pullUpList = []
				//				for(let i = 0; i < this.infiniteLoadData.initialShowNum; i++) {
				//					this.infiniteLoadData.pullUpList.push(this.card_list[i])
				//				}
			},

			getStartPullUpState() {
				//				if(this.list.length === this.infiniteLoadData.initialShowNum) {
				//					// 修改子组件的pullUpState状态
				//					this.infiniteLoadData.pullUpState = 3
				//				} else {
				//					this.infiniteLoadData.pullUpState = 0
				//				}
			},
		},
		components: {
			'v-refresh': DropDownRefresh
		}
	}
</script>

<style scoped="scoped">
	.down_1 {
		width: 8rem;
		margin-left: -5.6rem;
	}
	
	.down_1_1 {
		width: 0.15rem;
		margin-right: 0.05rem;
		width: 12px;
		height: 12px;
	}
	
	.weui-tab__panel_bd {
		width: 100%;
		height: calc(100% - 100px);
		overflow-y: auto;
	}
	
	.refreshText_center {
		width: calc(100% - 90px);
	}
	
	.weui-media-box {
		padding: 0px 5px;
		height: 100%;
	}
	
	.weui-media-box__desc {
		font-size: 0.85rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding-top: 0;
		color: #888;
	}
	
	.weui-media-box_appmsg .weui-media-box__hd {
		width: 3.9rem;
		height: 3.9rem;
		line-height: 3.9rem;
		margin: 0.3rem;
	}
	
	.span_1 {
		font-size: 0.9rem;
	}
	
	.span_2 {
		color: red;
		font-size: 1rem;
	}
	
	.weui-panel__bd {
		border-bottom: 1px solid gainsboro;
		margin: 0 10px;
		width: calc(100% - 20px);
		height: 3rem;
		padding: 5px 0;
	}
	
	.weui-media-box__hd .weui-media-box__thumb {
		width: 100%;
		height: 100%;
		border: 1px solid gainsboro;
		border-radius: 25px;
	}
	
	.weui-media-box__hd img[src=""] {
		opacity: 0;
	}
	
	.router_1 {
		font-size: 1rem;
		color: #000;
	}
	
	.weui-badge_1 {
		display: block;
		width: 1.2rem;
		height: 1.2rem;
		line-height: 1.2rem;
		background-color: red;
		border-radius: 1.2rem;
		text-align: center;
		color: white;
		font-size: 0.8rem;
		font-weight: 600;
	}
	
	.sel {
		font-size: 1.2rem;
		font-weight: bold;
	}
	/**
	 * 搜索框
	 */
	
	.weui-tab__panel_search {
		width: 100%;
		height: 3.5rem;
		background-color: RGB(239, 239, 244);
		opacity: 0.5;
		text-align: center;
		line-height: 3.5rem;
	}
	
	.weui-tab__panel_search input {
		width: calc(100% - 20px);
		height: 2rem;
		border-radius: 8px;
		border: 1px solid #ccc;
	}
	
	.weui-icon-search {
		position: absolute;
		font-size: 1.2rem;
		left: calc(50% - 2.3rem);
		margin-top: 1.1rem;
	}
	
	input::-webkit-input-placeholder {
		color: #aab2bd;
		font-size: 1rem;
		text-align: center;
	}
	
	.refreshText_right {
		align-self: flex-end;
	}
</style>